【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する

静的サイトのホスティングでCloudFront + S3の構成を検討されている方に向けて。

#AWS Amplify

#Amazon S3

#Amazon CloudFront

Kyo

2021.03.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。AWS事業本部のKyoです。

簡単に静的サイトを構築・管理したいといった場合、Amplifyが選択肢の１つに上がってきます。

Amplifyと聞くと「ReactとかVue.jsとか必要なんでしょ？」そんなイメージをお持ちの方も多いのではないでしょうか。

今回紹介するAmplify Consoleはそれらの知識はナシに、従来CloudFront + S3構成で対応していた静的サイトをより簡単に構築・管理することができます。

また、本ブログではホスティングに加えて、カスタムドメインの設定や開発環境の追加、Basic認証にも触れます。これらに関してはCloudFront + S3構成で実装するよりもはるかに簡単に設定することができます。

具体的なユースケースとしては、コーポレートサイトなどにハマるのではないかと思っています。

Amplify is 何？

まず、言葉を整理しましょう。

AWS Amplify は、それぞれを連携させたり個別で使用したりできる、ツールとサービスのセットです。これらの機能により、フロントエンドウェブおよびモバイルのデベロッパーが、AWS によるスケーラブルなフルスタックアプリケーションをビルドできるようにします。（抜粋）

https://aws.amazon.com/jp/amplify/

Amplifyは聞いたことあるけど、細かくてよく分からん...。あるあるだと思います。Amplifyには大きくCLI, Library, Consoleと3つの要素がありますが、今回出てくるのはAmplify Consoleのみです。

以下のブログに概要がまとまっているので画像を拝借します。

ざっくり言うと、Amplify Consoleは以下のAWSサービス群をいい感じにラップしたものです。

「AWS Amplifyコンソールを使ってHugoベースの静的サイトを構築」より引用

※ 引用の都合上、上図にはHugo（静的サイトジェネレーター）のアイコンが含まれていますが、HugoそのものがAmplify Consoleに含まれるわけではありません。本ブログではHugoを使わずに生のHTMLファイルを利用します。

GitHubにコードをプッシュすると、CodeBuildでビルドされ、アーティファクトはS3に格納。 Route53でドメイン登録して、ACMで証明書を発行してHTTPS対応する形でCloudFrontからS3のコンテンツを配信。

...このような構成は、よくある一方で準備が少々面倒です。要素が多く、学習に時間が必要だったり、構築の途中でつまづく可能性もあります。

Amplify Consoleを使えばユーザーに見えない形でこれらが作成されるので、Amplifyの管理画面を触るだけでいい塩梅に静的サイトの構築・運用が可能です。

※ AWSがいい塩梅にやってくれる反面、細かいチューニングが苦手なところもあり、そこはトレードオフになります。

今回必要になる知識

Gitレポジトリ（今回はGithubを利用します）とHTMLのごく基礎的な知識が必要になります。

とは言っても、レポジトリを作成して、master (main) ブランチに以下のindex.htmlがプッシュできれば大丈夫です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>TEST PAGE</h1>
</body>